上次我們有提到 < b > 和 < strong > 同樣都有將字體加粗的效果,同樣< i > 和 < em > 也是斜體的視覺效果,所以初次碰到的小白可能都會想,既然效果一樣為甚麼要多此一舉呢?
< b > 和 < strong > < i > 和 < em >同樣也各自有自己的不同,下面就來介紹這4個標籤的語義。
根據W3c對< i >的定義:< i >元素代表在普通文本中具有不同語態或語氣的一段文本,某種程度上表明一段不同特性的文本,比如一個分類學名稱,一個技術语,一個外語習語,一個音译,一個个想法,或者西方文本中的一艘船名。
#分類學名稱
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
#術語
<p>The term <i>prose content</i> is defined above.</p>
#外語習語
<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>
根據 W3C 对 < b > 的定义:b 元素代表側重實用目的而不带有任何额外重要性,也不暗示不同語態或語氣的一段文本,比如一段文本摘要中的關鍵詞、一段審查中的產品名稱、文本驅動軟件中的可執行語句或者一篇文章的導語。
#下面的< b >起到突出關鍵詞的作用,但不具備强调重要性的作用
<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>
#下面的< b >讓被包圍的詞特殊化
<p>You enter a small room. Your <b>sword</b> glows
brighter. A <b>rat</b> scurries past the corner wall.</p>
#下面的 b 元素標註了文章的導語
<article>
<h2>Kittens 'adopted' by pet rabbit</h2>
<p><b class="lede">Six abandoned kittens have found an
unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old
kittens to her Aberdeen home.</p>
...
</article><em>
根据 W3C 对 < em > 的定义:
em 元素代表對其内容的强调,强调位置的不同通常会带来整个句子含義的變化。
看下面舉的例子:
#這是一句不带任何强调的句子
<p>Cats are cute animals.</p>
#< em >包裹 Cats,强調猫是種可愛的動物,而不是狗或者其他動物
<p><em>Cats</em> are cute animals.</p>
#< em >包裹 are,代表句子所說是事實,来反駁那些說猫不可愛的人
<p>Cats <em>are</em> cute animals.</p>
#< em >包裹 cute,强調猫是一種可愛的動物,而不是有人說的刻薄、討厭的動物
<p>Cats are <em>cute</em> animals.</p>
#這裡强調猫是動物,而不是植物
<p>Cats are cute <em>animals</em>.</p>
根據 W3C 对 < strong > 的定義:< strong >代表内容的强烈的重要性、嚴重性或者緊急性。
重要性
< strong > 可以被用在標題(heading)、說明(caption)或者段落(paragraph)上,来顯示這部分被包圍的文字的重要性。
#章節序號不重要,章節的名字才重要
<h1>Chapter 1: <strong>The Praxis</strong></h1>
严重性
< strong > 可以被用来標記警告或者警示標誌。
<p><strong>Warning.</strong> This dungeon is dangerous.</p>
紧急性
< strong >可以被用来表示需要被盡快看見的部分。
需要注意的是,< strong > 元素僅僅对文本内容的重要性、嚴重性或緊急性产生作用,而不像 < em > 對句子含義進行改變。
<p>Welcome to Remy, the reminder system.</p>
<p>Your tasks for today:</p>
<ul>
<li><p><strong>Turn off the oven.</strong></p></li>
<li><p>Put out the trash.</p></li>
<li><p>Do the laundry.</p></li>
</ul>
< em > 用於對文本内容進行强調,强調位置的不同通常會改變句子的含義。
如果僅僅在語態或語氣上為了突出某一個文本,那應該使用 < i >。
但如果為了突出某一部分的重要性、严重性或紧急性,那应该使用 < strong >。
根據 W3C 对元素的说明,< b > 元素應當是在其他標籤都不合適的情况下最後一個考慮使用的標籤。
相同的,在考慮使用 < i > 之前,也要想想是否用 < em >、< strong >、< dfn > 或 < mark > 等元素更合適。
今天是鐵人賽第6天,我學習網路設計的第13天,現在基本上都是在往不熟悉的部分鑽研,最主要還是希望自己的基礎打好一點,知道網頁設計的每一步用意~大家共勉囉~
參考出處:https://www.zhihu.com/question/19551271/answer/146298923